<template>
  <div>
    <!--title-->
    <div class="content-title" ref="title">
      <div class="su-title">
        <i class="el-icon-tickets"> </i>
        <span>面试记录</span>
      </div>
      <div class="batch-but-css">
        <el-button type="primary" icon="el-icon-plus el-icon--left" @click="titleAddClick">新增</el-button>
        <el-upload
            ref="upload1"
            :action="titleProp.interface1"
            :show-file-list="false"
            list-type="text"
            :auto-upload="true"
            :on-success="titleImportDirectlyClick"
            :multiple="false"
            name="file"
            accept=".xls,.xlsx"
            :headers="headersData"
        >
          <el-button type="warning" icon="el-icon-download el-icon--left">批量导入</el-button>
        </el-upload>
        <el-button type="info" icon="el-icon-upload2 el-icon--left" @click="exportXlsx">批量导出</el-button>
        <el-button type="danger" icon="el-icon-refresh el-icon--left" @click="tabsOrTableDialogEmpty">清空设置
        </el-button>
      </div>
    </div>

    <!--tabs-->
    <div class="common-tabs" ref="tabs">
      <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
        <el-tab-pane name="" label="全部"/>
      </el-tabs>
    </div>

    <!--table-->
    <template>
      <!--表格前的按钮-->
      <div class="common-table-title-but" ref="tableTopBut">
        <el-button icon="el-icon-setting el-icon--left" @click="tabsOrTableSetClick('tableProp','筛表头配置')">
          配置表头
        </el-button>
      </div>
      <!--表格内容-->
      <el-table
          ref="table"
          :data="tableData"
          border
          style="width: 100%"
          :max-height="tableProp.tableHeight"
          :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
          v-loading="tableProp.loading"
          @selection-change="tableSelectionChange"
          class="cc-table-style"
      >
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="姓名" min-width="150" :show-overflow-tooltip="true" align="center" prop="L1"
                         v-if="Utils.tableShowFixed('姓名',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('姓名',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="简历序号" min-width="150" :show-overflow-tooltip="true" align="center" prop="L2"
                         v-if="Utils.tableShowFixed('简历序号',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('简历序号',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="面试时间" min-width="150" :show-overflow-tooltip="true" align="center" prop="L3"
                         v-if="Utils.tableShowFixed('面试时间',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('面试时间',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="面试官" min-width="150" :show-overflow-tooltip="true" align="center" prop="L4"
                         v-if="Utils.tableShowFixed('面试官',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('面试官',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="评分" min-width="150" :show-overflow-tooltip="true" align="center" prop="L5"
                         v-if="Utils.tableShowFixed('评分',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('评分',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="面试职位" min-width="150" :show-overflow-tooltip="true" align="center" prop="L7"
                         v-if="Utils.tableShowFixed('面试职位',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('面试职位',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="联系方式" min-width="150" :show-overflow-tooltip="true" align="center" prop="L8"
                         v-if="Utils.tableShowFixed('联系方式',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('联系方式',this.toConfigureFieldDialog.tableProp).fixed"/>
        <el-table-column label="面试状态" min-width="150" :show-overflow-tooltip="true" align="center" prop="L9"
                         v-if="Utils.tableShowFixed('面试状态',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('面试状态',this.toConfigureFieldDialog.tableProp).fixed">
          <template slot-scope="scope">
            <template v-for="item in tableSearchOption.L9Option">
              <template v-if="scope.row.L9==item.value">
                {{ item.label }}
              </template>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="235" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看/编辑
            </el-button>
            <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableDelClick(scope.row,0)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="common-pagination">
        <el-pagination
            @size-change="pageSizeChange"
            @current-change="pageCurrentChange"
            :current-page="paginationProp.currentPage"
            :page-sizes="[10, 20, 50, 100,500,1000]"
            :page-size="paginationProp.pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="paginationProp.total"
        />
      </div>
    </template>

    <!--抽屉增加和修改-->
    <el-drawer
        :title="drawerProp.title"
        :visible.sync="drawerProp.isDrawer"
        direction="rtl"
        :append-to-body="true"
        :modal-append-to-body="false"
        custom-class="common-drawer"
        size="1050px"
    >
      <div class="common-drawer-content" v-loading="drawerProp.loading">
        <div class="parent">
          <!--左边-->
          <div class="leftChild">
            <ul class="content">
              <li :class="[drawerProp.active===0?'active':'']" @click="drawerActiveClick(0)">基础设置</li>
            </ul>
          </div>
          <!--右边-->
          <div class="rightChild">
            <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange"
                :style="{'height': drawerProp.rightProp.height+'px'}">
              <li class="content-main" ref="drawerLi0">
                <div class="title">
                  <span></span>
                  <label>基础设置</label>
                  <div class="s"></div>
                  <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                    <div class="n" @click="drawerEdit(0)">
                      <i class="el-icon-edit"></i>
                      编辑
                    </div>
                  </template>
                </div>
                <!--查看-->
                <div class="see" v-if="drawerProp.status!=='add' && drawerProp.status!=='edit'">
                  <ul class="common-drawer-see">
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">姓名</span>
                      {{ formData.L1 }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">简历序号</span>
                      {{ formData.L2 }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">面试时间</span>
                      {{ Utils.timeDate(formData.L3, 4) }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">面试官</span>
                      {{ formData.L4 }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">评分</span>
                      {{ formData.L5 }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">面试意见</span>
                      {{ formData.L6 }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">面试职位</span>
                      {{ formData.L7 }}
                    </li>
                    <li class="common-drawer-see-li ">
                      <span class="common-drawer-see-li-title">联系方式</span>
                      {{ formData.L8 }}
                    </li>
                    <li class="common-drawer-see-li li2">
                      <span class="common-drawer-see-li-title">面试状态</span>
                      <template v-for="item in formDataOption.L9Option">
                        <template v-if="formData.L9==item.value">
                          {{ item.label }}
                        </template>
                      </template>
                    </li>
                  </ul>
                </div>
                <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                  <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">
                    <el-form-item label="姓名" prop="L1" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
                      <el-input placeholder="请输入姓名" v-model="formData.L1" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="简历序号" prop="L2" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入简历序号', trigger: 'blur' }]">
                      <el-input placeholder="请输入简历序号" v-model="formData.L2" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="面试时间" prop="L3" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请选择面试时间', trigger: 'change' }]">
                      <el-date-picker placeholder="请选择面试时间" v-model="formData.L3" :disabled="false"
                                      type="datetime" default-time="23:59:59" value-format="timestamp"/>
                    </el-form-item>
                    <el-form-item label="面试官" prop="L4" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入面试官', trigger: 'blur' }]">
                      <el-input placeholder="请输入面试官" v-model="formData.L4" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="评分" prop="L5" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入评分', trigger: 'blur' }]">
                      <el-input placeholder="请输入评分" v-model="formData.L5" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="面试意见" prop="L6" class="common-drawer-edit-li li2" :rules="[]">
                      <el-input placeholder="请输入面试意见" v-model="formData.L6" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="面试职位" prop="L7" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入面试职位', trigger: 'blur' }]">
                      <el-input placeholder="请输入面试职位" v-model="formData.L7" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="L8" class="common-drawer-edit-li "
                                  :rules="[{ required: true, message: '请输入联系方式', trigger: 'blur' }]">
                      <el-input placeholder="请输入联系方式" v-model="formData.L8" :disabled="false" clearable/>
                    </el-form-item>
                    <el-form-item label="面试状态" prop="L9" class="common-drawer-edit-li li2"
                                  :rules="[{ required: true, message: '请选择面试状态', trigger: 'change' }]">
                      <el-radio-group v-model="formData.L9" :disabled="false">
                        <el-radio v-for="(item,key) in formDataOption.L9Option" :key="key" :label="item.value">
                          {{ item.label }}
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-form>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--操作按钮-->
        <template>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerProp.isDrawer=false">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('add')">保 存
            </el-button>
          </div>
          <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
            <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
            <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('edit')">保 存
            </el-button>
          </div>

        </template>
      </div>
    </el-drawer>

    <!--dialog 集合-->


    <!--tabs和table dialog 字段选择显示问题-->
    <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div class="toConfigure-field-dialog-content" v-loading="toConfigureFieldDialog.loading">
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2"
                                     v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label"
                                      placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close"
                                                                                  @click="tabsOrTableClose(item,key)"
                                                                                  v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label"
                                   :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button type="danger" @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)"
                   icon="el-icon-delete el-icon--left">还原初始化
        </el-button>
        <el-button @click="tabsOrTableCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="tabsOrTableDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
  name: 'navigation44',
  components: {draggable},
  props: [],
  data() {
    return {
      //接口名称
      apiProp: {
        tableInit: 'navigation44List',//表格初始化
        tableAddEdit: 'navigation44AddEdit',//表格增加和编辑接口
        tableDel: 'navigation44Del',//表格删除接口
        tableQuery: 'navigation44Query',//表格查一条接口
        tableBatchDel: 'navigation44BatchDel',//批量删除接口
        tabsOrTableId: 44,//设置搜索条件和表头id
        selectApiBoolean: false,//比初始化接口先运行的接口是否先运行完成
      },
      headersData: {token: window.localStorage.getItem('token')},//导入之类要用

      //title 配置
      titleProp: {
        interface1: `${window.location.origin}/api/import.do?time=${new Date().getTime()}`,//批量导入接口地址
      },

      //tabs 配置
      tabsProp: {
        active: '',
        statusField: 'status',//切换的字段名
        SearchDropDown: true,//高级搜索下拉默认显示状态
        liHtmlNum: '',//有高级搜索时候差几个li
      },
      //tabs 搜索字段
      tabsSearchData: {},
      //tabs 选项
      tabsSearchOption: {},

      //table 数据
      tableData: [{//第1个表格值开始
        L1: '顾妍',//姓名
        L2: '03',//简历序号
        L3: '2024-03-28 14:28:59',//面试时间
        L4: '陈三',//面试官
        L5: '8.8',//评分
        L6: '还可以',//面试意见
        L7: '产品经理',//面试职位
        L8: '123456',//联系方式
        L9: '1',//面试状态
      },//第1个表格值结束
      ],
      tableProp: {
        loading: false,
        tableHeight: 0,
        tableSelectAll: [],//表格多选的值
      },
      // table 选项
      tableSearchOption: {//table 面试状态 选项
        L9Option: [
          {label: '未面试', value: '0'},
          {label: '已面试', value: '1'},
        ],
      },
      //table dialog data
      tableDialogProp: {},

      // 抽屉 值
      formData: {
        id: '',
        L1: '',//姓名
        L2: '',//简历序号
        L3: '',//面试时间
        L4: '',//面试官
        L5: '',//评分
        L6: '',//面试意见
        L7: '',//面试职位
        L8: '',//联系方式
        L9: '0',//面试状态
      },
      // 抽屉 选项
      formDataOption: {//面试状态 选项
        L9Option: [
          {label: '未面试', value: '0'},
          {label: '已面试', value: '1'},
        ],
      },
      //抽屉 配置
      drawerProp: {
        isDrawer: false,
        loading: false,
        title: '',
        seeBut: true,//是否是 查看/编辑 只有查看就是false
        active: 0,//左边选择了哪个
        status: 'add',// add 新增  see 查看
        leftProp: ["基础设置",],
        rightProp: {
          height: document.documentElement.clientHeight - 90,//右边高度
        }
      },

      //分页配置
      paginationProp: {
        currentPage: 1,//当前第几页
        pageSize: 10,//每页几条
        total: 0,//总数
      },
      //tabs和table dialog 字段选择显示
      toConfigureFieldDialog: {
        isDialog: false,
        title: '筛选项配置',
        loading: false,
        status: 'tabsProp',
        search: '',//搜索的值
        selectNum: 0,//选择的数量
        frozenFrontNum: 0,//冻结前几条
        frozenAfterNum: 0,//冻结后几条
        draggableProp: [],//拖拽数据
        tabsProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: []
          },
        ],
        tableProp: [
          {
            name: '基础设置',//标题
            show: true,//搜索是否显示
            option: [
              {checkbox: true, label: '姓名', show: true, order: 0},
              {checkbox: true, label: '简历序号', show: true, order: 0},
              {checkbox: true, label: '面试时间', show: true, order: 0},
              {checkbox: true, label: '面试官', show: true, order: 0},
              {checkbox: true, label: '评分', show: true, order: 0},
              {checkbox: true, label: '面试职位', show: true, order: 0},
              {checkbox: true, label: '联系方式', show: true, order: 0},
              {checkbox: true, label: '面试状态', show: true, order: 0},
            ]
          },
        ]
      }
    };
  },
  activated() {
  },
  mounted() {
    //高级搜索差几个li
    this.tabsOrTableInit();
    this.initData();//数据初始化
    this.calculationHeight();//table计算高度
    //监听浏览器变化
    window.onresize = () => {
      return (() => {
        this.calculationHeight();//table计算高度
      })();
    };
  },
  watch: {
    //主要作用监听赋值给table高度
    'tabsProp.SearchDropDown'() {
      this.calculationHeight();//table计算高度
    },
  },
  computed: {},
  methods: {
    //初始化
    initData() {
      let isDemo = true;
      if (isDemo) {
        return false
      }

      this.tableProp.loading = true;
      //下拉接口
      let variableArray = [];//变量数组
      if (!this.apiProp.selectApiBoolean) {
        // const form1=new Promise((resolve)=>{
        // this.$().then((result) => {
        //   console.log(result);
        // this.empUnitIdOption = result.map(item => ({
        //  label: item.unitName,
        //  value: item.id
        //  }));
        // resolve()
        // })
        // })
        // variableArray.push(form1)
        this.apiProp.selectApiBoolean = true;
      }
      Promise.all(variableArray).then(() => {
        if (this.apiProp.tableInit) {
          let params = {
            page: this.paginationProp.currentPage,
            row: this.paginationProp.pageSize,
          }
          params[`${this.tabsProp.statusField}`] = this.tabsProp.active == 0 ? '' : this.tabsProp.active;
          this[`$${this.apiProp.tableInit}`](params).then((result) => {
            if (result.data) {
              if (result.data.length == 0) {
                if (this.paginationProp.currentPage != 1) {
                  this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                  this.initData()
                  return false;
                }
              }
              this.tableData = result.data.map(item => ({
                id: item.id,
                L1: item.L1,//姓名
                L2: item.L2,//简历序号
                L3: item.L3,//面试时间
                L4: item.L4,//面试官
                L5: item.L5,//评分
                L7: item.L7,//面试职位
                L8: item.L8,//联系方式
                L9: item.L9,//面试状态
              }));
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            } else {
              this.tableData = [];
              this.paginationProp.total = result.count;//总数
              this.tableProp.loading = false;
            }
          }, () => {
            this.tableProp.loading = false;
          })
        } else {
          this.tableProp.loading = false;
        }
      })
    },
    //table 点击查看
    tableSeeClick(row, key) {
      this.drawerProp.isDrawer = true;
      this.drawerProp.title = '详细信息';
      this.drawerProp.status = 'see';
      if (key !== undefined) {
        this.drawerActiveClick(key)
      }
      let isDemo = true;
      if (isDemo) {
        this.formData.L1 = row.L1;//姓名
        this.formData.L2 = row.L2;//简历序号
        this.formData.L3 = this.Utils.stampData13(row.L3);//面试时间
        this.formData.L4 = row.L4;//面试官
        this.formData.L5 = row.L5;//评分
        this.formData.L6 = row.L6;//面试意见
        this.formData.L7 = row.L7;//面试职位
        this.formData.L8 = row.L8;//联系方式
        this.formData.L9 = row.L9;//面试状态

        return false
      }
      this.formData = this.$options.data().formData;
      this.drawerProp.loading = true;
      let params = {
        id: row.id
      }
      this[`$${this.apiProp.tableQuery}`](params).then((result) => {
        this.formData.id = result.data.id;
        this.formData.L1 = result.data.L1;//姓名
        this.formData.L2 = result.data.L2;//简历序号
        this.formData.L3 = this.Utils.stampData13(result.data.L3);//面试时间
        this.formData.L4 = result.data.L4;//面试官
        this.formData.L5 = result.data.L5;//评分
        this.formData.L6 = result.data.L6;//面试意见
        this.formData.L7 = result.data.L7;//面试职位
        this.formData.L8 = result.data.L8;//联系方式
        this.formData.L9 = result.data.L9;//面试状态
        this.drawerProp.loading = false;
      })
    },
    //抽屉 点击保存 和取消
    drawerSubmitForm(status) {
      if (status === 'see') {
        this.drawerProp.status = 'see';
        this.tableSeeClick({id: this.formData.id}, this.drawerProp.active);
        return false
      }
      //新增不是数组
      let variableArray = [];//变量数组
      variableArray.push('form' + 0);
      variableArray[0] = new Promise((resolve) => {
        this.$refs['drawerFrom0'].validate((valid) => {
          if (valid)
            resolve()
        })
      })
      Promise.all(variableArray).then(() => {
        this.drawerProp.loading = true;
        let data = {
          id: this.formData.id,
          L1: this.formData.L1,//姓名
          L2: this.formData.L2,//简历序号
          L3: this.Utils.timeDate(this.formData.L3, 4),//面试时间
          L4: this.formData.L4,//面试官
          L5: this.formData.L5,//评分
          L6: this.formData.L6,//面试意见
          L7: this.formData.L7,//面试职位
          L8: this.formData.L8,//联系方式
          L9: this.formData.L9,//面试状态
        }
        this[`$${this.apiProp.tableAddEdit}`](data).then(() => {
          this.$message.success('保存成功');
          this.initData();
          if (status === 'add') {
            this.drawerProp.isDrawer = false;
            this.drawerProp.loading = false;
          } else {
            this.drawerProp.loading = false;
            this.drawerProp.status = 'see';
            this.tableSeeClick({id: this.formData.id})
          }
        }, () => {
          this.drawerProp.loading = false;
        })
      })
    },
    //抽屉 点击编辑
    drawerEdit(key, handle) {
      console.log(handle);
      this.drawerProp.title = '修改详细信息';
      this.drawerProp.status = 'edit';
      this.drawerActiveClick(key);
    },
    //title 新增 点击
    titleAddClick() {
      this.formData = this.$options.data().formData;
      this.drawerProp.isDrawer = true;
      this.drawerProp.loading = false;
      this.drawerProp.title = '新增';
      this.drawerProp.status = 'add';
      this.drawerActiveClick(0)
    },
    //title 批量导入 点击
    titleImportDirectlyClick(response) {
      if (response.code === 0) {
        this.$message.success('批量上传成功');
      } else if (response.code === 401) {
        this.$message.error('登录超时');
        window.location = window.location.origin + window.location.pathname;
      } else {
        this.$message.error(response.msg);
      }
      this.initData();
    },
    //title 批量导出 点击
    exportXlsx() {
      let url = `${window.location.origin}/api/export.do?time=${new Date().getTime()}`
      let time = this.Utils.timeDate(new Date().getTime(), 4)
      this.Utils.windowOpen(url, `批量导出${time}.xlsx`)
    },
    //tabs 高级搜索 重置按钮
    tabsSearchReset() {
      this.tabsSearchData = this.$options.data().tabsSearchData;
    },
    //tabs 高级搜索 查询按钮点击
    tabsSearchDetermine() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //tabs 切换点击
    tabsSwitchClick() {
      this.paginationProp.currentPage = 1;//当前第几页
      this.initData();
    },
    //table 分页 选择了每页几条
    pageSizeChange(val) {
      this.paginationProp.currentPage = 1;//当前第几页
      this.paginationProp.pageSize = val;//每页几条
      this.initData();
    },
    //table 分页 点击了跳转到第几页
    pageCurrentChange(val) {
      this.paginationProp.currentPage = val;//当前第几页
      this.initData();
    },
    //table 多选
    tableSelectionChange(val) {
      this.tableProp.tableSelectAll = [];
      for (let i = 0; i < val.length; i++) {
        this.tableProp.tableSelectAll.push(val[i].id)
      }
    },
    //table 点击删除
    tableDelClick(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          id: row.id
        }
        this[`$${this.apiProp.tableDel}`](data).then(() => {
          this.$message.success('删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    //抽屉左边 点击切换标题
    drawerActiveClick(key) {
      setTimeout(() => {
        let scrollHeight = 0;
        this.drawerLiArray = [];
        for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
          this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
          if (key > i) {
            scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
          }
        }
        this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
        this.drawerProp.active = key;
      }, 300)
    },
    //抽屉右边 监听鼠标滚动
    addWheelChange() {
      setTimeout(() => {
        let scrollTop = 0;
        for (let i = 0; i < this.drawerLiArray.length; i++) {
          scrollTop += this.drawerLiArray[i];
          if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
            this.drawerProp.active = i;
            return false;
          }
        }
      }, 300)
    },
    //附件下载
    uploadFileDownload(url, item) {
      //下载不了是跨域的问题
      const URL = url
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', URL, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = item.name
          } else {
            a.setAttribute('download', item.name)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载 开始
    clickImage() {
      this.$nextTick(() => {
        let wrapper = document.getElementsByClassName(
            'el-image-viewer__actions__inner'
        )
        let downImg = document.createElement('i')
        downImg.setAttribute('class', 'el-icon-download')
        wrapper[0].appendChild(downImg)
        if (wrapper.length > 0) {
          this.wrapperElem = wrapper[0]
          this.cusClickHandler()
        }
      })
    },
    cusClickHandler() {
      this.wrapperElem.addEventListener('click', this.hideCusBtn)
    },
    hideCusBtn(e) {
      let className = e.target.className
      if (className === 'el-icon-download') {
        let imgUrl = document.getElementsByClassName(
            'el-image-viewer__canvas'
        )[0].children[0].src
        this.downloadImage(imgUrl)
      }
    },
    downloadImage(imgUrl) {
      let tmpArr = imgUrl.split('/')
      let fileName = tmpArr[tmpArr.length - 1]
      window.URL = window.URL || window.webkitURL
      let xhr = new XMLHttpRequest()
      xhr.open('get', imgUrl, true)
      xhr.responseType = 'blob'
      xhr.onload = function () {
        if (this.status == 200) {
          //得到一个blob对象
          let blob = this.response
          let fileUrl = window.URL.createObjectURL(blob)
          let a = document.createElement('a')
          ;(document.body || document.documentElement).appendChild(a)
          a.href = fileUrl
          if ('download' in a) {
            a.download = fileName
          } else {
            a.setAttribute('download', fileName)
          }
          a.target = '_self'
          a.click()
          a.remove()
        }
      }
      xhr.send()
    },
    //图片放大下载结束
    //table 批量删除
    tableTitleButBatchDel() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
        }
        this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
          this.$message.success('批量删除成功');
          this.initData();
        })
      }).catch(() => {
        this.$message.info('已取消批量删除');
      });
    },
    //table 计算高度
    calculationHeight() {
      setTimeout(() => {
        this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
      }, 300)
    },
    //tabs or table dialog 初始化
    tabsOrTableInit() {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }

        this.toConfigureFieldDialog.isDialog = false;
        this.toConfigureFieldDialog.loading = false;
        let tabsFieldPropNum = 0; //有几个li
        for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {

          for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
            if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
              tabsFieldPropNum++
            }
          }
        }
        if (this.$refs.commonTabsFrom) {
          let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
          this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
        }
      })
    },
    //tabs or table dialog 点击搜索
    tabsOrTableSearch(search) {
      if (search) {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          let oneShow = false;//第一层是否显示
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
              oneShow = true;
            } else {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
            }
          }
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
        }
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
          this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
          for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
          }
        }
      }
    },
    //tabs or table dialog 拖动点击删除
    tabsOrTableClose(item, key) {
      this.toConfigureFieldDialog.draggableProp.splice(key, 1);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
            this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
          }
        }
      }
    },
    //tabs or table dialog 清空以前的设置
    tabsOrTableDialogEmpty() {
      this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = {
          tableId: this.apiProp.tabsOrTableId,
          data: null
        }
        this.$commonApi(data).then(() => {
          this.$message.success('清空设置成功');
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        })
      }).catch(() => {
        this.$message.info('已取消清空设置');
      });
    },
    //tabs or table dialog 还原初始化
    tabsOrTableDialogReductionInit(status) {
      this.toConfigureFieldDialog.loading = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data);
        } else {
          this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
        }
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.isDialog = true;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs or table dialog 点击 关闭 取消
    tabsOrTableCancel() {
      this.tabsOrTableInit();
    },
    //tabs or table dialog 点击确定
    tabsOrTableDetermine() {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.search = '';
      this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
      for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
        for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
          for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
            if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
              this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
            }
          }
        }
      }
      let data = {
        tableId: this.apiProp.tabsOrTableId,
        data: JSON.stringify(this.toConfigureFieldDialog)
      }
      this.$commonApi(data).then(() => {
        this.$message.success('保存成功');
        this.tabsOrTableInit();
        this.tabsSearchData = this.$options.data().tabsSearchData;
        this.initData();
      })
    },
    //tabs or table dialog 点击选择
    tabsOrTableChecked(item) {
      if (item.checkbox) {
        this.toConfigureFieldDialog.draggableProp.push(item)
      } else {
        for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
          if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
            this.toConfigureFieldDialog.draggableProp.splice(i, 1);
          }
        }
      }
      this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
    },
    //tabs table 设置图标和按钮 dialog拖拽
    tabsOrTableSetClick(status, title) {
      this.toConfigureFieldDialog.loading = true;
      this.toConfigureFieldDialog.isDialog = true;
      let data = {
        tableId: this.apiProp.tabsOrTableId,
      }
      this.$commonApi2(data).then((result) => {
        if (result.data && result.data.data) {
          this.toConfigureFieldDialog = JSON.parse(result.data.data)
        }
        this.toConfigureFieldDialog.title = title;
        this.toConfigureFieldDialog.status = status;
        this.toConfigureFieldDialog.draggableProp = [];
        for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
          for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
            if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
              this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
            }
          }
        }
        //排序
        this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
          return p1.order - p2.order
        })
        this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
        this.toConfigureFieldDialog.loading = false;
      })
    },
    //tabs 高级搜索 重置按钮
  },
};
</script>
<style lang="scss" scoped></style>
                    